<template>
  <div class="other-card">
    <el-tabs v-model="activeName" class="other-tabs" @tab-click="switchTabs">
      <el-tab-pane label="客服分配" name="cusAssign">
        <CustomerRule ref="customerRule" />
      </el-tab-pane>
      <el-tab-pane label="网点派工" name="newAssign">
        <NetworkRule />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import CustomerRule from '../CustomerRule/index.vue'
  import NetworkRule from '../NetworkRule/index.vue'
  import { ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'

  const activeName = 'cusAssign'

  const customerRule = ref()

  // 导航切换
  const switchTabs = (tab: TabsPaneContext) => {
    switch (tab.props.name) {
      case 'cusAssign':
        customerRule.value.getList()
        break
      case 'newAssign':
        break
    }
  }

  // 获取客服分配列表
  const getCustomerList = () => {
    customerRule.value.getList()
  }

  defineExpose({ getCustomerList })
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
